import {ScrollView, StyleSheet, View} from "react-native";
import React, {useEffect, useState} from "react";
import {ScreenHeader} from "./components/ScreenHeader.tsx";
import ProcessTimeline from "../../components/ProcessTimeline.tsx";
import {ApprovalNodeInfo, ProcessInstanceApi} from "../../api/process.ts";
import {HeadForm} from "./components/HeadForm.tsx";
import {MainForm} from "./components/MainForm.tsx";
import {getSealInfo} from "../../api/seal.ts";
import {useAuthStore} from "../../store/authStore.ts";

export function DoneDetail(item: any) {
    const [processNodes, setProcessNodes] = useState<ApprovalNodeInfo[]>([])
    const userInfo = useAuthStore((state) => state.userInfo);
    const [status, setStatus] = useState<string>('')
    const [sealInfo, setSealInfo] = useState(item.route.params.item.applyData);
    useEffect(() => {
        getSealInfo({id: sealInfo.id}).then(res => {
            setSealInfo(res.data);
        });
        ProcessInstanceApi.getApprovalDetail({
            processInstanceId: sealInfo.processInstanceId
        }).then(response => {
            const resData = response.data as any
            if (response?.code === 0 && resData?.activityNodes) {
                setProcessNodes(resData.activityNodes)
                console.log(resData.activityNodes)
                setStatus(resData.status)
            } else {
                setProcessNodes([])
            }
        }).catch(error => {
            console.error('获取流程信息失败:', error)
            setProcessNodes([])
        })
    }, []);


    return (
        <View style={{backgroundColor: '#f7f7f7', flex: 1}}>
            <ScreenHeader
                navigation={item.navigation}
                title="已办详情"
                rightText="          "
            />
            <ScrollView contentContainerStyle={{paddingBottom: 80}}>
                <HeadForm nickname={userInfo.nickname} sealNumber={sealInfo.sealNumber} status={status}/>
                <MainForm sealInfo={sealInfo} processNodes={processNodes}/>
                <ProcessTimeline activityNodes={processNodes}/>
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    headContainer: {
        backgroundColor: '#fff',
        padding: 20,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        elevation: 0.9,
    },
    detailContainer: {
        backgroundColor: '#fff',
        paddingHorizontal: 20,
        paddingVertical: 15,
        margin: 8,
        borderRadius: 8,
        elevation: 0.9,
    },
    detailTitle: {
        fontSize: 22,
        fontWeight: 'bold',
        marginBottom: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
        paddingBottom: 10,
        textAlign: 'center',
    },
    detailRow: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    detailLabel: {
        fontSize: 15,
        color: '#666',
        width: 90,
    },
    detailValue: {
        fontSize: 15,
        color: '#333',
        fontWeight: '500',
        textAlign: 'left',
        flex: 1,
    }
})